<template>
  <div>
    <div class="complain-content-all">
      <div class="complainant-img">
        <img :src="this.headimgurl" alt="">
      </div>
      <div class="complain-content">
        <div class="content">
          <p>{{this.outdata.cause_complaint}}</p>
          <div>
            <img :src="outdata.image_complaint" alt="" class="content-img">
          </div>
          <p class="comlain-time">
          投诉时间:{{outdata.create_time}}
          </p>
          <div class="custom-service-reply" v-if="outdata.reply!=undefined">
            <div style="font-size:.25rem;">
              客服回复:
              <span>{{outdata.reply}}</span>
            </div>
            <p class="back-time">回复时间:{{outdata.reply_time}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cut-off"></div>
    <div class="recout-content">
      <div class="space"></div>
      <div style="width:70%;margin-left:10px;float:left;" v-for="(items,$index) in prosecutiondata" :key="$index">
        <div style="font-size:.25rem;margin-top:5px;">
          追述内容:
          <span>{{items.prosecution_info}}</span>
          <p class="back-time">追述时间:{{items.prosecution_time}}</p>
        </div>
        <div class="custom-service-reply" v-if="items.prosecution_reply!=undefined">
          <p style="font-size:.25rem;margin-top:5px;">
            客服回复:
            <span>{{items.prosecution_reply}}</span>
          </p>
          <p class="back-time">回复时间:{{items.prosecution_time}}</p>
        </div>
      </div>
    </div>
    <div class="recout-button" v-if="this.$route.query.state==='1'">
      <yd-button type="warning" class="recont-button-right" @click.native="show1 = true">追 述</yd-button>
    </div>
    <!-- 添加追述 -->
    <yd-popup v-model="show1" position="center" width="90%">
      <p>
        <yd-cell-group>
          <yd-cell-item>
              <yd-textarea slot="right" v-model="prosecution_info" placeholder="请输入您追述的内容" maxlength="300"></yd-textarea>
          </yd-cell-item>
        </yd-cell-group>
      </p>
      <p style="text-align: center;">
        <yd-button @click.native="createProsecution" style="width:40%;margin-bottom:10px;" type="warning">确定</yd-button>
      </p>
    </yd-popup>
  </div>
</template>
<script>
export default {
  name: 'complaintInfo',
  data() {
    return {
      show1: false,
      headimgurl: '',
      username: '',
      outdata: {},
      prosecutiondata: {},
      prosecution_info: ''
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.myInfo,
        dataType: 'json',
        success: (resultData) => {
          if (resultData.status === 1) {
            this.nickname = resultData.result.nickname;
            this.headimgurl = resultData.result.headimgurl;
          } else {
            this.$dialog.toast({mes: resultData.msg})
          }
        }
      });
      this.hdAjax({
        url: this.API.getComplaintInfo,
        data: {
          id: this.$route.query.id
        },
        success: (resultData) => {
          this.outdata = resultData.data;
          this.prosecutiondata = resultData.data.prosecutionlist
        }
      });
    },
    createProsecution() {
      this.hdAjax({
        method: 'POST',
        url: this.API.createProsecution,
        data: {
          id: this.$route.query.id,
          prosecution_info: this.prosecution_info
        },
        success: (resultData) => {
          // this.collectionState = resultData.data.state;
          // show1 = false;
          this.$dialog.toast({mes: '追述成功, 请耐心等待回复'})
          this.$router.push({path: '/myComplaint', query: {}})
        }
      });
    }
  }
}
</script>

<style scoped>
.complain-content-all{
  width:100%;
  margin-top:20px;
  /* height: 320px; */
  /* float: left; */
}
.complainant-img{
  height: 100%;
  width: 60px;
  float: left;
  margin-left:10px;
}
.complainant-img img{
  height: 60px;
  width: 60px;
  border-radius: 30px;
}
.complain-content{
  width: 100%;
  /* height:300px; */
}
.comlain-time{
 float: right;
 margin-right:5px;
 font-size:.2rem;
 
}
.content{
  float: left;
  width: 70%;
  margin-left:10px;
  margin-top:10px;
  /* height:300px; */
  font-size:.25rem;
  margin-bottom:10px;
}
.content-img{
  width: 100%;
  height:200px;
}
.custom-service-reply{
   background-color: #F0F0F0;
   color:	#4F4F4F;
   float:left;
   margin-top:5px;
   width:100%
}
/* .cut-off{
  border-bottom: 1px solid 	#8E8E8E;
} */
.recont-button-right{
  float: right;
  margin-top:10px;
  margin-right:20px;
}
.recout-content{
  width: 100%;
}
.space{
   height: 100px;;
   width:60px;
   margin-left:10px;
   float:left;
}
.back-time{
  margin-left:45%;
  font-size:.2rem;
  margin-top:5px;
}
</style>
